<template>
  <header>
    <div class="search">
      <img src="@/assets//images/fenlei.png" alt="" />

      <van-search
        class="v-search"
        v-model="value"
        placeholder="请搜索关键词"
        @click="goSearch"
      />

      <div class="zt"><i class="iconfont icon-liaotian1"></i></div>
    </div>
  </header>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const value = ref("");
const router = useRouter();
const goSearch = () => {
  router.push("/Search");
};
</script>
<style lang="less" scoped>
header {
  position: fixed;
  width: 100%;
  position: absolute;
  top: 0;
}
.search {
  position: relative;
  background-color: #fff;
  top: 0;
  display: flex;
  justify-content: space-around;
  height: 61px;
  width: 100%;

  img {
    width: 25px;
    height: 25px;
    padding: 18px 10px;
    background-color: #fff;
  }
  .v-search {
    flex: 1;
    height: 61px;
  }
  .zt {
    width: 30px;
    height: 61px;
    line-height: 61px;
    padding-right: 10px;

    background-color: #fff;
    .icon-liaotian1 {
      font-size: 30px;
      color: #3632328a;
    }
  }
}
</style>
